<template>
    <div class="bg">
        <div class="order-serve">订单服务</div>
        <div class="order">
            <div class="top">
                <p style="margin-bottom: 0px;line-height: 30px;font-size: 18px;margin-top: 8px;">
                    <van-icon name="orders-o" color="#ddd" size="30" />
                    <span>绿巢精品酒店(广州永泰地铁站)</span>
                    <span style="line-height: 30px;">￥413.00</span>
                </p>
                <p style="margin-top: 0px;margin-bottom: 0px;">
                    <span style="margin-left: 30px;">入 10-12 离 10-14 2晚/1间</span>
                    <span>已经取消</span>
                </p>

            </div>
            <div class="center">
                <p>常见问题</p>
                <p>
                    <van-button type="default" size="small" color="#eee" style="color: #000;margin-right: 15px;">
                        订单是否取消成功</van-button>
                    <van-button type="default" size="small" color="#eee" style="color: #000;">订单为什么被取消</van-button>
                </p>
                <p>
                    <van-button type="default" size="small" color="#eee" style="color: #000;margin-right: 15px;">
                        支付的房费何时退款</van-button>
                    <van-button type="default" size="small" color="#eee" style="color: #000;">取消的订单是否能恢复</van-button>
                </p>

            </div>
            <div class="bottom">
                <p>
                    <van-button round type="success" color="#0066ff" @click="toPay">去支付</van-button>
                </p>
            </div>
        </div>
    </div>

</template>

<script setup>
import { useRouter } from 'vue-router';


const router = useRouter()

const toPay = () => {
    router.push("/paying")
}
</script>

<style lang="scss">
body {
    height: 100%;
    background-color: #eee;
}

.order-serve {
    width: 100%;
    height: 40px;
    line-height: 40px;
    margin-bottom: 10px;
    background-color: #fff;
}

.order {
    width: 350px;
    height: 280px;
    border: 1px solid #fff;
    margin: auto;
    background-color: #fff;
    margin-bottom: 10px;

    .top {
        width: 100%;
        height: 65px;
        border-bottom: 1px dashed #ddd;
        // line-height: 70px;
        text-align: left;
        color: gray;
        font-size: 16px;

        p {
            display: flex;
            justify-content: space-between;

            span {
                height: 30px;
            }
        }
    }

    .center {
        width: 100%;
        height: 130px;
        border-bottom: 1px solid #ddd;

        p {
            text-align: left;
            margin-left: 30px;
            margin-top: 10px;
        }
    }

    .bottom {
        width: 75px;
        height: 45px;
        margin-left: 250px;
        margin-top: 15px;

        p {
            margin-top: -5px;
        }
    }
}
</style>